<template>
  <section>
    <div>姓名：<input v-model="formData.name"></div>
    <div>年龄：<input v-model="formData.age" type="number"></div>
    <div>
        性别：
        男<input v-model="formData.sex" type="radio" value="男" name="age">
        女<input v-model="formData.sex" type="radio" value="女" name="age">
    </div>
    <button @click="handleAdd">同步添加</button>
    <button @click="handleAction">异步添加</button>
  </section>
</template>

<script lang="ts" setup>
  import {reactive} from "vue";
  import {useStore} from "vuex";
  const store = useStore();

  const formData = reactive<any>({})
  let id = 7;

  function handleAdd() {
    const data = {...formData};
    data.id = id ++;
    store.commit("addStu",data);
  }

  function handleAction() {
    const data = {...formData};
    data.id = id ++;
    store.dispatch("addStu",data);
  }


</script>

<style>

</style>